<template>
  <div class="editor-wrapper">
    <!-- 胶囊切换：纯 div 模式 -->
    <div class="lang-switch">
      <div
        class="switch-item"
        :class="{ active: mode === 'js' }"
        @click="mode = 'js'"
      >
        JavaScript
      </div>
      <div
        class="switch-item"
        :class="{ active: mode === 'ts' }"
        @click="mode = 'ts'"
      >
        TypeScript
      </div>

      <!-- 背景滑块（依旧保留滑动动画） -->
      <span class="bg-slider" :class="mode" />
    </div>

    <button class="custom-btn" @click="doFormat">格式化(Prettier)</button>

    <codemirror
      v-model="code"
      :extensions="extensions"
      placeholder="请输入代码..."
      class="code-mirror"
      style="margin-top: 5px"
    />

    <slot name="tools" />
  </div>
</template>

<script setup lang="ts">
/* 以下代码与你原来完全一致，无需任何改动 */
import { ref, computed, watch, defineProps, defineEmits } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { formatCode } from '@/utils/formatCode'

const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
const code = ref(props.modelValue)

watch(() => props.modelValue, v => v !== code.value && (code.value = v))
watch(code, v => emit('update:modelValue', v))

const mode = ref<'js' | 'ts'>('js')
const extensions = computed(() => [
  javascript({ jsx: true, typescript: mode.value === 'ts' })
])

watch(mode, now => {
  if (now === 'ts' && !code.value.includes(':'))
    code.value = `function greet(name: string): void {\n  console.log("hello " + name)\n}`
  else if (now === 'js' && code.value.includes(': string'))
    code.value = `function greet(name) {\n  console.log("hello " + name)\n}`
})

async function doFormat() {
  code.value = await formatCode(code.value, mode.value)
}
</script>

<style lang="less" scoped>
/* ---------- 变量 ---------- */
@height: 32px;
@radius: 6px;
@primary: #409eff;
@text: #303133;
@bg: #f5f7fa;

.editor-wrapper {
  margin-top: 20px;
  position: relative;
}

/* ---------- 胶囊开关 ---------- */
.lang-switch {
  position: relative;
  display: inline-flex;
  background: @bg;
  border-radius: @radius;
  padding: 2px;
  font-size: 14px;
  height: @height;
  box-sizing: content-box;
}

.switch-item {
  position: relative;
  z-index: 2;
  width: 104px;
  height: @height;
  line-height: @height;
  text-align: center;
  color: @text;
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;

  &.active {
    color: @primary;
    font-weight: 500;
  }
}

/* 背景滑块 */
.bg-slider {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 104px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.bg-slider.js {
  transform: translateX(0);
}
.bg-slider.ts {
  transform: translateX(104px);
}

/* ---------- 其他 ---------- */
.custom-btn {
  margin-left: 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  vertical-align: top;

  &:hover {
    background: #ecf5ff;
    border-color: #409eff;
    color: #409eff;
  }
}

.code-mirror {
  margin-top: 12px;
}
</style>